<template>
  <el-card shadow="hover">
    <el-descriptions
      class="margin-top"
      title="店铺后台数据"
      :column="3"
      :size="size"
      border
    >
      <template #extra>
        <el-button type="primary" @click="handleEdit(1, 0)">
          添加店铺后台数据
        </el-button>
        <el-button type="primary" size="small" @click="handleMore(1, 0)">
          查看更多
        </el-button>
      </template>
    </el-descriptions>
    <el-table
      v-loading="listLoading"
      :data="StoreSeviceRecordList.List"
      style="width: 100%"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="小记ID"
        prop="TrackID"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="小记时间"
        prop="TrackTime"
        show-overflow-tooltip
        width="150"
      />
      <el-table-column
        align="center"
        label="统计月份"
        prop="CountMonth"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        label="是否达标行业优选商家"
        show-overflow-tooltip
        width="180"
      >
        是
      </el-table-column>
      <el-table-column
        align="center"
        label="金冠商品数"
        prop="JinguanProductNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="上月在线商品数"
        prop="upMonthProductNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="展现次数"
        prop="ShowNum"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column
        align="center"
        label="访客数"
        prop="FangkeNum"
        show-overflow-tooltip
        width="90"
      />
      <el-table-column
        align="center"
        label="浏览量"
        prop="LiulanNum"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="询盘量"
        prop="XunpanNum"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column align="center" label="操作" width="100">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="toStore(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="StoreSeviceRecordList.Total"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </el-card>
  <store-edit ref="storeEditRef" @fetch-data="fetchData" />
</template>

<script>
  import StoreEdit from '@/views/business/components/StoreEdit'
  export default defineComponent({
    name: 'StoreSeviceRecord',
    components: {
      StoreEdit,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        selectRows: '',
        OrderInfo: {},
        StoreSeviceRecordList: [],
        listLoading: true,
        storeEditRef: null,
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        queryForm: {
          pageNo: 1,
          pageSize: 5,
        },
      })

      const showList = (OrderInfo, StoreSeviceRecordList) => {
        state.OrderInfo = OrderInfo
        state.StoreSeviceRecordList = StoreSeviceRecordList
        state.listLoading = false
      }

      const fetchData = () => {
        emit('fetch-data')
      }
      const handleEdit = (n, row) => {
        // 店铺后台数据
        if (n == 1 && row == 0) {
          row = {
            OrderID: state.OrderInfo.OrderID,
            TrackClass: 2,
            TrackType: 1,
            TrackID: 0,
          }
        }
        // 店铺后台数据
        if (n == 1) state.storeEditRef.showEdit(row)
      }
      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const toStore = (row) => {
        console.log(row, '22123')

        state.storeEditRef.showEdit(row, 'look')
      }

      return {
        ...toRefs(state),
        showList,
        toStore,
        fetchData,
        setSelectRows,
        handleEdit,
        close,
      }
    },
  })
</script>
